<template>
   <div class="login-container">
    <div 
      class="login-card" 
      ref="loginCardRef" 
      @mousemove="handleMouseMove" 
      @mouseleave="handleMouseLeave"
    >
      <div class="card-header">
        <h1 class="title">知链 408</h1>
        <p class="subtitle">开启你的刷题之旅</p>
      </div>
      
      <div class="subject-icons">
        <i class="fas fa-microchip" title="计算机组成原理"></i>
        <i class="fas fa-network-wired" title="计算机网络"></i>
        <i class="fas fa-database" title="数据结构"></i>
        <i class="fas fa-laptop-code" title="操作系统"></i>
      </div>
      
      <div class="login-options">
        <a class="login-btn wechat" @click="handleWechatLogin">
          <i class="fab fa-weixin"></i>
          <span> 微信登录 </span>
        </a>
        
        <a class="login-btn email" @click="handleEmailLogin">
          <i class="fas fa-envelope"></i>
          <span> 邮箱登录 </span>
        </a>
      </div>
      
      <div class="terms">
        <p>
          登录即表示同意我们的
          <a href="javascript:void(0);">服务条款</a>
          和
          <a href="javascript:void(0);">隐私政策</a>
          。
        </p>
      </div>
    </div>
  </div>
</template>


<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()


import { ref, onMounted } from 'vue';

// 登录卡片引用
const loginCardRef = ref(null);

// 重写DOM方法（保持原有功能）
const rewriteDOMMethods = () => {
  // 保存原生方法引用
  const nativeQuerySelector = Element.prototype.querySelector;
  const nativeInsertBefore = Element.prototype.insertBefore;
  
  // 重写querySelector方法
  Element.prototype.querySelector = function(selector) {
    const element = nativeQuerySelector.call(this, selector);
    if (element && !element.hasAttribute('data-selectorname')) {
      element.setAttribute('data-selectorname', selector);
    }
    return element;
  }
  
  // 重写insertBefore方法
  Element.prototype.insertBefore = function(newNode, referenceNode) {
    const parentNode = this;
    
    if (!referenceNode) {
      return nativeInsertBefore.call(parentNode, newNode, null);
    }
    
    if (referenceNode.parentNode === parentNode) {
      return nativeInsertBefore.call(parentNode, newNode, referenceNode);
    }
    
    const referenceParentValue = referenceNode.getAttribute('data-ytparentvalue');
    if (referenceParentValue) {
      const actualParentNode = document.querySelector(`[data-ytextravalue="${referenceParentValue}"]`);
      if (actualParentNode) {
        const originalIndex = referenceNode.getAttribute('data-ytoriginindex');
        if (originalIndex !== null && !isNaN(originalIndex)) {
          const children = Array.from(actualParentNode.children);
          for (let i = 0; i < children.length; i++) {
            const child = children[i];
            const childOriginalIndex = child.getAttribute('data-ytoriginindex');
            if (childOriginalIndex !== null && !isNaN(childOriginalIndex)) {
              if (parseInt(childOriginalIndex) > parseInt(originalIndex)) {
                return nativeInsertBefore.call(actualParentNode, newNode, child);
              }
            }
          }
          return nativeInsertBefore.call(actualParentNode, newNode, null);
        }
        return nativeInsertBefore.call(actualParentNode, newNode, null);
      }
    }
    
    return nativeInsertBefore.call(parentNode, newNode, null);
  }
}

// 处理鼠标移动视差效果
const handleMouseMove = (e) => {
  const rect = loginCardRef.value.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const centerX = rect.width / 2;
  const centerY = rect.height / 2;
  const moveX = (x - centerX) / 20;
  const moveY = (y - centerY) / 20;
  
  loginCardRef.value.style.transform = `perspective(1000px) rotateX(${-moveY}deg) rotateY(${moveX}deg) scale(1.05)`;
}

// 处理鼠标离开效果
const handleMouseLeave = () => {
  loginCardRef.value.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1)';
}

// 处理微信登录
const handleWechatLogin = () => {
  //TODO
  router.push('/navigation')
  //alert('微信登录功能待开发...');
}

// 处理邮箱登录
const handleEmailLogin = () => {
  alert('邮箱登录功能待开发...');
}

// 组件挂载后执行
onMounted(() => {
  console.log('登录页面已加载');
  rewriteDOMMethods();
});
</script>

<style scoped>

/* 保持原有样式不变 */
.login-container {
  background-color: #111827;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-family: system-ui, -apple-system, sans-serif;
  position: relative;
  overflow: hidden;
}

.login-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://design.gemcoder.com/staticResource/echoAiSystemImages/9664595fe43cee721736a500eb0c1fdb.png");
  background-size: cover;
  background-position: center;
  opacity: 0.1;
  z-index: 0;
}

.login-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, #1e40af, #5b21b6);
  opacity: 0.7;
  z-index: 0;
}

.login-card {
  background-color: rgba(30, 41, 59, 0.3);
  backdrop-filter: blur(12px);
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  padding: 2rem;
  max-width: 28rem;
  width: 100%;
  border: 1px solid rgba(59, 130, 246, 0.5);
  transition: all 0.3s ease;
  position: relative;
  z-index: 10;
}

.card-header {
  text-align: center;
  margin-bottom: 2rem;
}

.title {
  font-size: 2.5rem;
  font-weight: 800;
  color: white;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
  text-shadow: 0 0 8px rgba(0, 191, 255, 0.8), 
               0 0 15px rgba(0, 191, 255, 0.6), 
               0 0 20px rgba(0, 191, 255, 0.4);
}

.subtitle {
  color: #93c5fd;
  font-size: 1.125rem;
}

.subject-icons {
  display: flex;
  justify-content: space-around;
  margin-bottom: 1.5rem;
}

.subject-icons i {
  font-size: 2.5rem;
  margin: 0 0.5rem;
  transition: transform 0.3s ease;
}

.subject-icons i:hover {
  transform: scale(1.25);
}

.subject-icons .fa-microchip {
  color: #93c5fd;
}

.subject-icons .fa-network-wired {
  color: #a7f3d0;
}

.subject-icons .fa-database {
  color: #c4b5fd;
}

.subject-icons .fa-laptop-code {
  color: #fca5a5;
}

.login-options {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
  color: white;
}

.login-btn:hover {
  transform: translateY(-0.25rem) scale(1.05);
}

.wechat {
  background-color: rgba(34, 197, 94, 0.7);
  border: 1px solid rgba(34, 197, 94, 0.5);
  box-shadow: 0 10px 25px -5px rgba(34, 197, 94, 0.1), 0 8px 10px -6px rgba(34, 197, 94, 0.1);
}

.wechat:hover {
  background-color: rgba(22, 163, 74, 0.7);
}

.email {
  background-color: rgba(59, 130, 246, 0.7);
  border: 1px solid rgba(59, 130, 246, 0.5);
  box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1), 0 8px 10px -6px rgba(59, 130, 246, 0.1);
}

.email:hover {
  background-color: rgba(37, 99, 235, 0.7);
}

.login-btn i {
  font-size: 1.5rem;
  margin-right: 1rem;
}

.terms {
  margin-top: 2rem;
  text-align: center;
  color: #94a3b8;
  font-size: 0.875rem;
}

.terms a {
  color: #60a5fa;
  text-decoration: none;
}

.terms a:hover {
  text-decoration: underline;
  color: #93c5fd;
}
</style>